<template>
	<view class="recommendation">
		<image class="app_bg" src="https://sspzjz.oss-cn-shanghai.aliyuncs.com/yys/bj.png" />
    <view class="giveName_header">
      <image src="../../static/my/list_bg.png" />
      <view class="giveName_header_title">{{ resultData?.wuxing }}</view>
    </view>
    <view class="giveName_title">
      <image src="../../static/pages/tjmz_title.png" />
    </view>
    <view class="giveName_con">
      <view class="giveName_item"
       v-for="(item, index) in answerList" :key="index">
        <image class="giveName_img" src="../../static/pages/giveName_item.png" />
        <view class="giveName_text">{{ item }}</view>
      </view>
    </view>

    
    <view class="result_con_btn" @click="showPayPopup" v-if="resultData?.payStatus == 0">
      <view class="result_noPay_title">共{{ resultData?.resultCount || 0 }}条起名，点击查看</view>
      <image src="../../static/result/btn.png" />
    </view>
    
    <uni-popup ref="popup">
      <view class="payPopup">
        <view class="popup_content">
          <image class="popup_bg" src="../../static/result/popup.png" />
          <view class="popup_content_title1">限时特惠</view>
          <view class="popup_content_center">
            <view class="popup_content_title2">
              <view class="popup_content_title2_price">
                {{ packageData?.discount }}
                <view class="popup_content_title2_icon">特惠</view>
              </view>
              <view class="popup_content_title2_unit">元</view>
            </view>
            <view class="popup_content_title3">原价{{ packageData?.amount }}元</view>
            <view class="popup_content_title4">即可解锁全部解析!</view>
          </view>
          <view class="popup_content_title5" @click="payMoney">立即解锁</view>
        </view>
        <view class="popup_close" @click="closePayPopup">
          <image class="popup_close_icon" src="../../static/result/closePopup.png" />
        </view>
      </view>
    </uni-popup>
	</view>
</template>

<script setup>
import request from '../../common/js/request'
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { uniPay } from '@/common/js/method.js'

onLoad((opt)=>{
  getOrderInfo(opt.id || '1768897818359447553');
  // popup.value.open();
})

const popup = ref();
let answerList = ref(null)
let resultData = ref(null);
let packageData = ref(null);

const getOrderInfo = function (id) {
  request('/api/busi/busi/yys/order/detail', {id}).then((res)=>{
    resultData.value = res.data;
    answerList.value = res.data.names;
    getSelectList();
  })
}
const getSelectList = function () {
	let url = '/api/busi/package/select/by-applyid'
	request(url).then((res)=>{
		if(res.status == 200) {
			packageData.value = res.data.find(item => item.type == resultData.value.orderType);
		}
	});
}
const showPayPopup = function () {
  popup.value.open();
}
const closePayPopup = function () {
  popup.value.close();
}
const payMoney = function () {
  let params = {
    id: resultData.value.id,
    payType: 2
  }
  request('/api/busi/busi/yys/order/pay', params).then((res)=>{
    uniPay(res.data).then((res)=>{
      getOrderInfo(resultData.value.id);
      closePayPopup();
    })
  })
}

</script>

<style lang="less" scoped>
.recommendation {
  box-sizing: border-box;
  padding: 80rpx;
  .giveName_header {
    position: relative;
    height: 120rpx;
    image {
      width: 100%;
      height: 100%;
    }
    .giveName_header_title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 32rpx;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 46px;
      color: rgba(117, 72, 59, 1);
      white-space: nowrap;
    }
  }
  .giveName_title {
    margin: 30rpx auto;
    width: 312rpx;
    height: 70rpx;
    &>image {
      width: 100%;
      height: 100%;
    }
  }
  .giveName_con {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0 30rpx;
    .giveName_item {
      position: relative;
      .giveName_img {
        width: 100%;
        height: 140rpx;
        opacity: 1;
      }
      .giveName_img1 {
        width: 100%;
        height: 140rpx;
        opacity: 1;
      }
      .giveName_img2 {
        position: absolute;
        top: 48%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 91%;
        height: 120rpx;
        opacity: 1;
      }
      .giveName_text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 32rpx;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 46rpx;
        color: rgba(117, 72, 59, 1);
        text-align: center;
        vertical-align: top;
      }
    }
  }
  .result_con_btn {
    margin: 0 auto;
    width: 480rpx;
    height: 180rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .payPopup {
    .popup_content {
      position: relative;
    }
    .popup_bg {
      width: 690rpx;
      height: 610rpx;
    }
    .popup_content_title1 {
      position: absolute;
      top: 60rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 36rpx;
      font-weight: 700;
      letter-spacing: 0;
      color: rgba(252, 234, 198, 1);
    }
    .popup_content_center {
      width: 350rpx;
      position: absolute;
      top: 150rpx;
      left: 50%;
      transform: translateX(-50%);
    }
    .popup_content_title2 {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      .popup_content_title2_price {
        position: relative;
        font-size: 96rpx;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 96rpx;
        color: rgba(212, 48, 48, 1);
      }
      .popup_content_title2_icon {
        position: absolute;
        top: 0;
        left: calc(100% + 16rpx);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80rpx;
        height: 36rpx;
        border-radius: 16rpx 0 16rpx 0;
        background: rgba(212, 48, 48, 1);
        font-size: 24rpx;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 36rpx;
        color: rgba(255, 255, 255, 1);
      }
      .popup_content_title2_unit {
        font-size: 28rpx;
        font-weight: 500;
        letter-spacing: 0;
        color: rgba(212, 48, 48, 1);
      }
    }
    .popup_content_title3 {
      margin-top: 10rpx;
      text-align: center;
      font-size: 20rpx;
      font-weight: 500;
      letter-spacing: 0;
      text-decoration-line: line-through;
      color: rgba(117, 72, 59, 1);
    }
    .popup_content_title4 {
      margin-top: 16rpx;
      text-align: center;
      font-size: 36rpx;
      font-weight: 600;
      letter-spacing: 0;
      color: rgba(117, 72, 59, 1);
    }
    .popup_content_title5 {
      position: absolute;
      bottom: 75rpx;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300rpx;
      height: 100rpx;
      font-size: 36rpx;
      font-weight: 700;
      letter-spacing: 0;
      color: rgba(117, 72, 59, 1);
    }
    .popup_close {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 46rpx;
    }
    .popup_close_icon {
      width: 60rpx;
      height: 60rpx;
    }
  }
  .result_noPay_title {
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(117, 72, 59, 1);
  }
}
</style>